<script lang='ts' setup>
import { UserInterface } from '@/api/userManage';
import { computed, ref } from 'vue';
const formRef = ref()

defineExpose({ formRef })
const rules = {
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_-]+$/, message: '名称只能包含-、_、数字和英文字母', trigger: 'blur' },
    ],
    username: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    passwordAgain: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
    ],
}
const props = defineProps<{
    visible: boolean,
    formData: UserInterface,
    dialogProps: any,
}>()
const emits = defineEmits<{
    (e: 'close'): void,
    (e: 'submit', data: UserInterface): void
}>()
const formData = computed<UserInterface>(() => props.formData)
</script>
<template>
    <el-dialog :title="dialogProps.title" v-model="props.visible" width="600px" @close="emits('close')">
        <el-form :model="formData" label-width="120px" :rules="rules" ref="formRef" @submit.prevent>
            <el-form-item label="账号" prop="account">
                <el-input v-model="formData.account" placeholder="请输入账号" maxlength="10" />
            </el-form-item>
            <el-form-item label="姓名" prop="username">
                <el-input v-model="formData.username" placeholder="请输入姓名" maxlength="10" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" show-password v-model="formData.password" placeholder="请输入密码"
                    maxlength="10" />
            </el-form-item>
            <el-form-item label="重复输入密码" prop="passwordAgain">
                <el-input type="password" show-password v-model="formData.passwordAgain" placeholder="请再次输入密码"
                    maxlength="10" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="emits('close')">取消</el-button>
            <el-button @click="emits('submit', formData)" type="primary">提交</el-button>
        </template>
    </el-dialog>
</template>
<style scoped lang='scss'></style>